import { useState, useEffect } from "react";
import { ScrollView, View } from "@tarojs/components";
import { IHeaderBox, IBarCharts } from "@/components/index";
import { colChartStat } from "@/axios/profession";

import "./index.scss";

interface OIProps {}

const OIIndex: React.FC<OIProps> = () => {
  const [triggered, setTriggered] = useState<boolean>(false);
  const [barChartData, setBarChartData] = useState<API.ChartStatItem[]>([]);

  const getChartData = async () => {
    try {
      const results = await colChartStat();
      setBarChartData(results);
      setTriggered(false);
    } catch {}
  };

  const onRefresh = () => {
    getChartData();
    setTriggered(true);
  };

  useEffect(() => {
    getChartData();
  }, []);

  return (
    <ScrollView
      scrollY
      className="scrollview"
      onRefresherRefresh={onRefresh}
      enableBackToTop
      refresherEnabled
      refresherTriggered={triggered}
      scrollWithAnimation
    >
      <View className="common_page">
        <View className="card_box chart_box">
          <IHeaderBox title="职业兴趣" />
          <IBarCharts id="oi_chart" data={barChartData} />
        </View>
      </View>
    </ScrollView>
  );
};

export default OIIndex;
